<template>
    <view
        :style="{
            '--bgcolor': pageData.bgColor,
            '--color': color,
            '--inactive-color': pageData.inactiveColor || '#606266',
            '--group-size': pageData.groupSize ? pageData.groupSize + 'rpx' : '30rpx',
            '--group-weight': pageData.groupWeight || 'normal',
            '--back-color': $common.hexToRgba(color, 0.1)
        }"
    >
        <!-- 样式五 -->
        <view class="list5" v-if="pageData.style == 5">
            <view class="d-flex">
                <view class="flex-1 text-center" @click="current = index" v-for="(item, index) in list" :key="index">
                    <view class="tab m-bot10" :class="{ thmeColor: index == current }">{{ item.classify_name }}</view>
                    <view class="h6 color_99" :class="{ active: index == current }">{{ item.classify_info }}</view>
                </view>
            </view>
            <view class="padding20 d-flex f-wrap j-sb" v-if="list.length">
                <view class="item bgwhite bor_radius_20 m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in list[current].goods" :key="index" @click="toGoods(item)">
                    <view class="text-center">
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="img bor_radius_20"></image>
                    </view>
                    <view class="padding20">
                        <view class="size30 ellipsis m-bot10" :style="{ 'font-weight': pageData.goodsWeight || 300 }">{{ item.name }}</view>
                        <view class="h6 color_66 ellipsis m-bot10">{{ item.info }}</view>
                        <view class="d-flex a-center">
                            <view class="flex-1">
                                <view class="size36 bold" :style="{ color: pageData.priceColor || '#E90B08' }" v-if="!pageData.hidePrice">￥{{ parseFloat(item.price) }}</view>
                                <view class="h7 color_66">已售{{ item.sales_number }}</view>
                            </view>
                            <view class="btn m-right10" :style="{ background: '#50d643' }" v-if="item.recommendList" @click.stop="openPop(item, 1)">
                                {{ item.recommendList[0].btn_title || '试样' }}
                            </view>
                            <view class="btn" :style="{ background: pageData.btnColor || '#E90B08' }" @click.stop="openPop(item, 2)">去购买</view>
                        </view>
                        <view class="profit_title m-top20" v-if="pageData.showPriceInfo">
                            <view class="flex-1">{{ item.profitTitle }}</view>
                            <view class="share flexac">分享</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 专场 -->
        <view class="special" v-else-if="pageData.style == 4">
            <view class="content" v-for="(item, index) in list" :key="index">
                <view class="d-flex a-center m-bot30">
                    <view class="flex-1 tab">{{ item.classify_name }}</view>
                    <view class="color_99" @click="toCates(item)">
                        <text>进入专场</text>
                        <text class="iconfont icon-xiangyouxiayiye h6"></text>
                    </view>
                </view>
                <image class="bor_radius_10 m-bot20" :src="$imgUrls(pageData.img)" mode="widthFix" @click="toCates(item)" v-if="list.length == 1 && pageData.img"></image>
                <image class="bor_radius_10 m-bot20" :src="$imgUrls(item.classify_atlas)" mode="widthFix" @click="toCates(item)" v-else-if="item.classify_atlas"></image>
                <view class="scroll-x d-flex p-left6 p-right6" v-if="item.goods && item.goods.length">
                    <block v-for="(subItem, subIndex) in item.goods" :key="subIndex">
                        <view class="item text-center m-right30 p-re" @click="toGoods(subItem)" v-if="subIndex < pageData.count">
                            <image :src="$imgUrls(subItem.img)" mode="aspectFill" class="img m-bot10"></image>
                            <view class="mask2 padding20" v-if="!subItem.stock">
                                <image src="https://sra.mogoie.com/Uploads/diy/img/sold.png"></image>
                            </view>
                            <view class="ellipsis m-bot6" :style="{ 'font-weight': pageData.goodsWeight || 'normal' }">{{ subItem.name }}</view>
                            <view :style="{ color: pageData.priceColor || '#E90B08' }" v-if="!pageData.hidePrice">
                                <text>￥</text>
                                <text class="size28">{{ parseFloat(subItem.price) }}</text>
                            </view>
                            <text class="size20 color_33 ellipsis" v-if="subItem.is_bnt == 1">{{ subItem.shop_name }}</text>
                            <view class="profit_title m-top10" v-if="pageData.showPriceInfo">{{ subItem.profitTitle }}</view>
                        </view>
                    </block>
                    <view class="more bor_radius_4 flexac f-column f-shrink-0 color_99" @click="toCates(item)" v-if="item.goods.length > pageData.count">
                        <text class="txt">查看更多</text>
                        <u-icon name="arrow-right-double" size="12"></u-icon>
                    </view>
                </view>
            </view>
        </view>

        <!-- 样式三 -->
        <view v-else-if="pageData.style == 3" :style="{ background: pageData.bgColor }">
            <view class="p-bot30 p-left8 p-right8">
                <u-tabs :list="list" :activeStyle="{ color }" lineWidth="20" :lineColor="color" keyName="classify_name" @click="click" :inactiveStyle="{ color: pageData.inactiveColor }"></u-tabs>
            </view>
            <view class="slide d-flex p-left30" v-if="list.length">
                <view class="item m-right30 p-re" v-for="(item, index) in list[current].goods" :key="index" @click="toGoods(item)">
                    <text class="iconfont size28 p-ab" :class="item.goods_collect ? 'icon-guanzhu3' : 'icon-guanzhu1'" @click.stop="handleCollect(item)"></text>
                    <image :src="$imgUrls(item.img)" mode="aspectFill" :class="['img', { shadow: pageData.shadow == 1 }]"></image>
                    <view class="mask2" v-if="!item.stock"></view>
                    <image src="https://sra.mogoie.com/Uploads/diy/img/sold.png" class="sold" v-if="!item.stock"></image>
                    <view class="d-flex j-sb a-center p-top20 m-bot20">
                        <view class="size30 black ellipsis" :style="{ 'font-weight': pageData.goodsWeight || 300 }">{{ item.name }}</view>
                        <view class="iconfont size40 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'" :style="{ color: pageData.btnColor || '#E90B08' }"></view>
                    </view>
                    <view class="p-bot20">
                        <text class="size28" :style="{ color: pageData.priceColor || '#E90B08' }" v-if="!pageData.hidePrice">￥{{ parseFloat(item.price) }}</text>
                        <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view :class="{ 'd-flex': pageData.style == 2 }" v-else>
            <!-- 顶部菜单 -->
            <view class="rows p-top20 p-bot10" :style="{ background: pageData.bgColor }" v-if="pageData.style == 1">
                <u-tabs
                    :list="list"
                    :activeStyle="{ color }"
                    :inactiveStyle="{ color: pageData.inactiveColor }"
                    lineWidth="20"
                    :lineColor="color"
                    :scrollable="false"
                    keyName="classify_name"
                    @click="click"
                ></u-tabs>
            </view>
            <!-- 左侧菜单 -->
            <view class="side" :style="{ background: pageData.bgColor }" v-if="pageData.style == 2">
                <view v-for="(item, index) in list" :key="index" @click="handleClick(index)">
                    <view :class="['tab ellipsis', { on: index == current }]">
                        {{ item.classify_name }}
                    </view>
                </view>
            </view>

            <view class="content" v-if="list.length">
                <block v-for="(item, index) in list[current].goods" :key="index">
                    <view class="row bgwhite bor_radius_10 m-bot20 p-re" :class="{ shadow: pageData.shadow == 1 }" @click="toGoods(item)" v-if="index < pageData.count || show">
                        <image :src="$imgUrls(item.img)" mode="aspectFill" class="list_imgs bor_radius_left10"></image>
                        <view class="mask1" v-if="!item.stock"></view>
                        <image src="https://sra.mogoie.com/Uploads/diy/img/sold.png" class="sold1" v-if="!item.stock"></image>
                        <view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
                            <view class="rows m-top20">
                                <text class="black size32 ellipsis" :style="{ 'font-weight': pageData.goodsWeight || 300 }">{{ item.name }}</text>
                                <text class="color_77 size28 m-top20 ellipsis_2 bold300">{{ item.info }}</text>
                            </view>
                            <view class="d-flex a-center" v-if="item.is_bnt == 1">
                                <view class="iconfont icon-store black size32"></view>
                                <text class="size26 color_33 p-left10">{{ item.shop_name }}</text>
                            </view>

                            <view class="row j-sb a-center m-bot20">
                                <view>
                                    <text class="size26" :style="{ color: pageData.priceColor || '#E90B08' }" v-if="!pageData.hidePrice">￥</text>
                                    <text class="size34 bold500" :style="{ color: pageData.priceColor || '#E90B08' }" v-if="!pageData.hidePrice">{{ parseFloat(item.price) }}</text>
                                    <text class="h6 color_77 bold300" v-if="item.unit && !pageData.hideUnit">/{{ item.unit }}</text>
                                    <!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
                                </view>
                                <view class="iconfont size42 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'" :style="{ color: pageData.btnColor || '#E90B08' }"></view>
                            </view>
                        </view>
                    </view>
                </block>

                <view class="size26 color_66 text-center p-top10" v-if="pageData.count < list[current].goods.length && !show" style="cursor: pointer" @click="getTotal">查看全部</view>

                <emptys v-if="!list[current].goods.length" :top="10"></emptys>
            </view>
        </view>

        <specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" />
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import specsPopup from '../specsPopup.vue';
    import Api from '@/common/Api.js';
    export default {
        name: 'tabs',
        props: ['pageData'],
        components: { specsPopup },
        data() {
            return {
                list: [],
                current: 0,
                // 控制"查看全部"和超出显示个数商品的显示隐藏
                show: false,
                showPopup: false,
                info: '',
                openBusinessView: {
                    businessType: '',
                    queryString: ''
                },
                extraData: {
                    headSupplierAppid: '', // 需要填入您的机构appid
                    commissionType: 1, // 1代表机构自己分佣
                    commissionRatio: 0 // 机构自己分佣时设为0
                }
            };
        },
        async mounted() {
            this.getBlockInfo();
            const requestResult = await Api.getUserBindInfo();
            if (!requestResult || requestResult.user_status == 4) return;
            const result = requestResult.data;
            this.openBusinessView = {
                businessType: result.businessType,
                queryString: result.queryString
            };
            this.extraData = {
                headSupplierAppid: result.extraData.headSupplierAppid,
                commissionType: result.extraData.commissionType,
                commissionRatio: result.extraData.commissionRatio
            };
        },
        methods: {
            ...mapMutations(['setHome']),
            async getBlockInfo() {
                const result = await this.$getBlockInfo(this.pageData.list);
                if (!result.list.length) return;
                this.list = result.list || [];
            },
            click(e) {
                this.current = e.index;
            },
            handleClick(index) {
                this.current = index;
            },
            getTotal() {
                this.show = true;
            },
            handleCollect({ goods_id }) {
                // 收藏
                if (!this.vid) return this.setHome({ showMode: true });
                this.$http
                    .post({
                        url: '/singleSaleApi/goods_collect',
                        data: {
                            goods_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.getBlockInfo();
                    });
            },
            async toGoods(item) {
                let { classify_cate } = this.list[this.current];
                // 维修预约
                if (classify_cate == 5) return this.toUrl('/zunyi/details?goods_id=' + item.goods_id);
                // 服务预约
                if (classify_cate == 4) {
                    if (!this.vid) return this.setHome({ showMode: true });
                    this.toUrl('/orderPage/order/submitReserve?goods_id=' + item.goods_id);
                    return;
                }
                // 推客
                if (classify_cate == 6) {
                    this.ShareBtn(item)
                    return;
                }
                // 普通商品
                let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + item.goods_id;
                if (this.pageData.mode == 1) path = path + '&mode=1';
                if (this.pageData.mode == 2) path = path + '&mode=1&scan=1';
                this.toUrl(path);
            },
            toCates(item) {
                if (!this.pageData.mode) this.toUrl('/pages/goods/goods_list?classId=' + item.classify_id + '&className=' + item.classify_name);
                if (this.pageData.mode == 1) this.$rectTo('/pages/classify/repast');
                if (this.pageData.mode == 2) this.toUrl('/otherPage/custom/placeOrder');
                if (this.pageData.mode == 3) this.toUrl('/orderPage/order/serviceReserve');
                if (this.pageData.mode == 4) this.toUrl('/zunyi/List?classify_id=' + item.classify_id + '&title=' + item.classify_name);
                if (this.pageData.mode == 5) this.toUrl(`/weiDian/List?classify_id=${item.classify_id}`);
            },
            openPop(item, type) {
                // type：1试样、2去购买
                if (!this.vid) return this.setHome({ showMode: true });
                this.info = type == 1 ? item.recommendList[0] : item;
                this.showPopup = true;
            },
            async ShareBtn(Item) {
                const myData = Item.myData;
                if (Item.share_verification == 1 && !myData.sharer_appid) {
                    const reuslt = await this.$Modals('您还未授权成为推客', '成为推客后分享商品可产生收益');
                    if (reuslt) this.Business();
                    return;
                } else {
                    this.toUrl(`/weiDian/weiShare?goods_id=${Item.goods_id}`);
                }
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            }
        },
        computed: {
            ...mapState(['color', 'vid'])
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        width: 100%;
        padding: 30rpx;
        background: var(--bgcolor);
    }
    .list_imgs,
    .mask1 {
        width: 242rpx;
        height: 242rpx;
    }
    .mask1,
    .mask2 {
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
    }
    .sold1 {
        width: 148rpx;
        height: 148rpx;
        position: absolute;
        top: 50%;
        margin-top: -74rpx;
        left: 47rpx;
    }
    .side {
        width: 164rpx;
        .tab {
            width: 100%;
            line-height: 120rpx;
            text-align: right;
            position: relative;
            &.on {
                color: var(--color);
                &:after {
                    content: '';
                    position: absolute;
                    width: 6rpx;
                    height: 50rpx;
                    background: var(--color);
                    bottom: 35rpx;
                    left: 0;
                }
            }
        }
    }
    .shadow {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    .slide {
        overflow-x: scroll;
        .item {
            width: 280rpx;
            .img,
            .mask2 {
                width: 280rpx;
                height: 436rpx;
            }
            .sold {
                width: 148rpx;
                height: 148rpx;
                position: absolute;
                left: 50%;
                margin-left: -74rpx;
                top: 144rpx;
            }
            .icon-guanzhu1,
            .icon-guanzhu3 {
                top: 20rpx;
                left: 20rpx;
                color: var(--color);
                z-index: 10;
            }
        }
    }
    .special {
        .item {
            width: 160rpx;
            .img,
            .mask2 {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
            }
        }
        .more {
            width: 84rpx;
            background: #eff0f2;
            .txt {
                writing-mode: vertical-lr;
                letter-spacing: 12rpx;
            }
        }
    }
    .tab {
        font-size: var(--group-size);
        color: var(--inactive-color);
        font-weight: var(--group-weight);
    }
    .list5 {
        background: var(--bgcolor);
        padding-top: 30rpx;
        .item {
            width: 345rpx;
        }
        .img {
            width: 310rpx;
            height: 310rpx;
        }
        .active {
            display: inline-block;
            background: var(--color);
            padding: 4rpx 20rpx;
            border-radius: 30rpx;
            color: white;
        }
        .btn {
            padding: 10rpx;
            border-radius: 30rpx;
            font-size: 24rpx;
            color: white;
        }
    }
    .profit_title {
        height: 68rpx;
        background: var(--back-color);
        border-radius: 10rpx;
        overflow: hidden;
        font-weight: 600;
        color: var(--color);
        display: flex;
        align-items: center;
        padding-left: 10rpx;
        .share {
            height: 100%;
            background: var(--color);
            font-size: 28rpx;
            color: white;
            padding: 0 12rpx;
        }
    }
</style>
